﻿@using KelonProud
@using KelonProud.Mvc.Models
@model KelonProud.Administration.Dtos.NavigationInputDto

@{
    Layout = "~/Views/Shared/_EditMaster.cshtml";
}
@inherits KelonProud.Administration.KelonProudRazorPage<TModel>


<div class="box from-box modal-box">
    @*<div class="box-header with-border">
            <h3 class="box-title">创建菜单</h3>
        </div>*@
    <form class="form-horizontal" id="EditForm" name="EditForm" validate method="post" role="form">
        @Html.HiddenFor(f => f.Id)
        <div class="box-body">
            <ul class="nav nav-tabs tab-nav-right" role="tablist">
                <li role="presentation" class="active"><a href="#edit-navigation-details" data-toggle="tab">菜单/功能信息</a></li>
                <li role="presentation"><a href="#edit-user-roles" data-toggle="tab">关联角色信息</a></li>
                @if (!IsHasTenantId)
                {
                    <li role="presentation" class="edit-edtion-panel"><a href="#edit-edtion" data-toggle="tab">关联版本</a></li>
                }
            </ul>

            <div class="tab-content">
                <div role="tabpanel" class="tab-pane animated fadeIn active" id="edit-navigation-details">
                    @if (!IsHasTenantId)
                    {
                        <div class="form-group">
                            <label class="col-sm-2 control-label">所属租户</label>
                            <div class="col-sm-10">
                                @Html.Partial("Modals/Components/_DropDownSelectView", new DropDownSelectModel()
                           {
                               Name = "TenantId",
                               Url = "/api/services/admin/tenant/GetTenants",
                               Value = Model.TenantId.ToString(),
                               IdKey = "id",
                               TextKey = "name",
                               NullItemText = "无",
                               NullItemValue = "-1",
                               AllowNull = true,
                               IsDisabled = !Model.IsCreate(),
                               AllowSearch = false,
                               OnChangedEvent = "onChangeTenant"
                           })
                                <span class="help-block m-b-none">当菜单所属某个租户时，菜单不可选择关联版本</span>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                    }
                    else
                    {
                        @Html.HiddenFor(f => f.TenantId)
                    }

                    <div class="form-group">
                        <label class="col-sm-2 control-label">上级菜单</label>
                        <div class="col-sm-10">
                            @Html.Partial("~/Views/Shared/Modals/Components/_DropDownTreeView.cshtml", new DropDownTreeModel
                       {
                           Url = "/api/services/admin/navigation/GetNavigationTreeJson",
                           IsMilti = false,
                           Name = "ParentId",
                           Value = Model.ParentId
                       })
                            <span class="help-block m-b-none">功能菜单不能作为上级菜单</span>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">菜单/功能名称</label>
                        <div class="col-sm-10">
                            @Html.TextBoxFor(f => f.Name, new { @class = "form-control validate" })
                            <span class="help-block m-b-none">菜单/功能名称长度不能超过20个字符，建议4-6个汉字</span>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">菜单/功能编码</label>
                        <div class="col-sm-10">
                            @Html.TextBoxFor(f => f.Code, new { @class = "form-control validate" })
                            <span class="help-block m-b-none">菜单/功能编码长度不能超过15个字符，建议以字母+数字进行编码</span>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">请求地址</label>
                        <div class="col-sm-10">
                            @Html.TextBoxFor(f => f.ActionUrl, new { @class = "form-control" })
                            <span class="help-block m-b-none">菜单/功能请求地址必须为虚拟地址，如:~/home/index</span>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">类型</label>
                        <div class="col-sm-10">
                            @Html.Partial("Modals/Components/_DropDownSelectView", new DropDownSelectModel()
                       {
                           Name = "Type",
                           Url = "/api/services/admin/navigation/GetNavigationTypes",
                           Value = Model.Type.ToInt32(),
                           IdKey = "id",
                           TextKey = "name",
                           AllowSearch = false,
                           AllowNull = false,
                           OnChangedEvent = "onChangeNavigationType"
                       })
                        </div>
                    </div>
                    <div class="form-group " id="quickDiv">
                        <label class="col-sm-2 control-label">快速添加功能</label>
                        <div class="col-sm-10">
                            <div class="checkbox-inline">
                                <input id="FunctionAdd" type="checkbox" name="FunctionAdd" value="true" class="form-control filled-in" />
                                <label for="FunctionAdd" class="form-label">新增</label>
                            </div>
                            <div class="checkbox-inline">
                                <input id="FunctionEdit" type="checkbox" name="FunctionEdit" value="true" class="form-control filled-in" />
                                <label for="FunctionEdit" class="form-label">编辑</label>
                            </div>
                            <div class="checkbox-inline">
                                <input id="FunctionDelete" type="checkbox" name="FunctionDelete" value="true" class="form-control filled-in" />
                                <label for="FunctionDelete" class="form-label">删除</label>
                            </div>
                            <span class="help-block m-b-none">本次保存中可快速为菜单添加功能,若编码或名称已存在则不添加</span>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">菜单/功能图标</label>
                        <div class="col-sm-10">
                            @Html.HiddenFor(f => f.Icon)
                            <a class="btn btn-default menu-ico" id="menu_ico_btn"><i class="@Model.Icon"></i></a>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">菜单/功能排序</label>
                        <div class="col-sm-10">
                            <div class="input-group spinner" data-trigger="spinner">
                                @Html.TextBoxFor(f => f.Order, new { @class = "form-control", value = "1", @data_min = "0", data_max = "50", data_step = "1", data_rule = "quantity" })
                                <span class="input-group-addon">
                                    <a href="javascript:;" class="spin-up" data-spin="up"><i class="fa fa-caret-up"></i></a>
                                    <a href="javascript:;" class="spin-down" data-spin="down"><i class="fa fa-caret-down"></i></a>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">是否隐藏</label>
                        <div class="col-sm-10">
                            <div class="checkbox">
                                @Html.CheckBoxFor(f=>f.IsHide, new { @class = "form-control filled-in" })
                             
                                <label for="IsHide" class="form-label">隐藏</label>
                            </div>
                        </div>
                    </div>
                    <div class="hr-line-dashed"></div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">菜单/功能描述</label>
                        <div class="col-sm-10">
                            @Html.TextAreaFor(f => f.Description, new { @class = "form-control" })
                        </div>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane animated fadeIn" id="edit-user-roles">
                    <div class="row">
                        <div class="col-sm-12 ">
                            @foreach (var role in Model.RoleDtos)
                            {
                                <div class="col-sm-6">
                                    <input type="checkbox" name="role" value="@role.Id" title="@role.Description" class="filled-in" id="@string.Format("role{0}", role.Id)" @(Model.NavIsInRole(role) ? "checked" : "") />
                                    <label for="@string.Format("role{0}", role.Id)" title="@role.DisplayName">@role.DisplayName</label>
                                </div>
                            }
                        </div>
                    </div>
                </div>
                @if (IsHasTenantId)
                {
                    <div role="tabpanel" class="tab-pane animated fadeIn edit-edtion-panel" id="edit-edtion">
                        <div class="row">
                            <div class="col-sm-12 ">
                                @foreach (var edition in Model.Editions)
                                {
                                    <div class="col-sm-6">
                                        <input type="checkbox" name="edition" value="@edition.Id" title="@edition.DisplayName" class="filled-in" id="@string.Format("edition{0}", edition.Id)" @(Model.NavIsInEdit(edition) ? "checked" : "") />
                                        <label for="@string.Format("edition{0}", edition.Id)" title="@edition.DisplayName">@edition.DisplayName</label>
                                    </div>
                                }
                            </div>
                        </div>
                    </div>
                }
            </div>
        </div>
        @Html.Partial("~/Views/Shared/Modals/_ModalFooterWithSaveAndCancel.cshtml")
    </form>
</div>

@section styles {
    <style>
        .menu-ico {
            color: #246f71;
            border-radius: 0;
        }


        .layui-layer-iframe .layui-layer-content {
            height: calc(100% - 100px);
            height: -moz-calc(100% - 100px);
            height: -webkit-calc(100% - 100px);
        }
    </style>
}

@section scripts{
    <script>
        $(function () {
            $("#menu_ico_btn").click(function () {
                var index = layer.open({
                    title: "选择菜单图标",
                    type: 2,
                    content: "/Admin/Common/Icons",
                    area: ["100%", "80%"],
                    btn: ["确定", "关闭"],
                    btnclass: ["btn btn-primary", "btn btn-danger"],
                    yes: function (n, t) {
                        var className = $(t).find("iframe")[0].contentWindow.getData();
                        if (className !== "" && className != null) {
                            $("#menu_ico_btn").find("i").attr("class", className);
                            $("#Icon").val(className);

                            layer.close(index);

                            //parent.layer.close(index);
                        } else {
                            $(t).find("iframe")[0].contentWindow.abp.message.warn("请选择一个图标后再点击确定按钮", "选择错误");
                        }
                    },
                    cancel: function () {
                        return !0;
                    }
                });
            });
        });

        function onChangeTenant(e) {
            if (e.id === "-1") {
                $(".edit-edtion-panel").removeClass("hidden");
            } else {
                $(".edit-edtion-panel").addClass("hidden");
            }
        }

        function onChangeNavigationType(e) {
            if (e.id === "0") {
                $("#quickDiv").removeClass("hidden");
            } else {
                $("#quickDiv").addClass("hidden");
            }
        }

        function saveFormEvent(_$form) {
            var _navService = abp.services.admin.navigation;
            var user = _$form.serializeFormToObject(); //serializeFormToObject is defined in main.js
            user.roleIds = [];
            user.editionIds = [];

            var _$roleCheckboxes = $("input[name='role']:checked");
            if (_$roleCheckboxes) {
                for (var roleIndex = 0; roleIndex < _$roleCheckboxes.length; roleIndex++) {
                    var _$roleCheckbox = $(_$roleCheckboxes[roleIndex]);
                    user.roleIds.push(_$roleCheckbox.val());
                }
            }

            if ($("#TenantId").val() === "-1") {
                var _$editionCheckboxes = $("input[name='edition']:checked");
                if (_$editionCheckboxes) {
                    for (var editionIndex = 0; editionIndex < _$editionCheckboxes.length; editionIndex++) {
                        var _$editionCheckbox = $(_$editionCheckboxes[editionIndex]);
                        user.editionIds.push(_$editionCheckbox.val());
                    }
                }

            } else {
                $("#TenantId").val("");
            }


            abp.ui.setBusy(_$form);
            _navService.save(user).done(function () {
                if (user.Id === 0) {
                    abp.notify.success("菜单创建成功！");
                } else {
                    abp.notify.success("菜单修改成功！");
                }

                DiyWindow.closeModal();

            }).always(function () {
                abp.ui.clearBusy(_$form);
            });
        }
    </script>
}